import React from "react";
import Sidebar from "./components/Sidebar";
import ProductContent from "./components/ProductContent";
import { DEFAULT_MENU } from "./constant";
import './index.less';

const Product: React.FC = () => {
  const [menuItems, setMenuItems] = React.useState(DEFAULT_MENU);
  const [selectedKeys, setSelectedKeys] = React.useState<Array<string>>(['VTEC']);
  const onClickMenuItem = (e: any) => {
    if(e.key){
      setSelectedKeys([e.key]);
    }
  }
  return <div className="product-container">
    <div className="product-side-bar">
      <Sidebar 
        onClickMenuItem={onClickMenuItem}
        menuItem={menuItems}
        selectedKeys={selectedKeys}
      />
    </div>
    <div className="product-content">
      <ProductContent
        selectedKey={selectedKeys[0]}
      />
    </div>
  </div>
}

export default Product;